<template>
  <div class="container">
    <div class="header">
      <task-switch @task-type="currTaskType" />
      <div class="title">{{ navigateTitle }}</div>
      <div style="display: flex;">
        <div class="user-box">

<div class="user">
  <img src="@/assets/images/user.png" alt="" />
  {{ userName }}
</div>
<div
  style="display: flex; align-items: center; color: #ffffff"
  @click="toggleFullScreen"
>
  {{ fullScreen ? "全屏" : "退出全屏" }}
  <img
    class="fullScreen"
    :src="!fullScreen ? exitFullScreenUrl : FullScreenUrl
    "
    alt=""
  />
</div>
</div>
<div class="back-view">
  <el-image class="home-icon" :src="getImgUrl()" fit="cover"></el-image>
  <text class="home-text" @click="backHomeTap">返回首页</text>
</div> 
        </div>

    </div>


    <div class="manager-view">
      <!-- <task-manager /> -->
      <detection-manager
        v-if="!isTask"
        @statusSelect="detectionStatusSelect"
        @dateSelect="detectionDateSelect"
        @personSelect="detectionPersonSelect"
      />
      <task-manager
        v-else
        @statusSelect="taskStatusSelect"
        @dateSelect="taskDateSelect"
        @personSelect="taskPersonSelect"
        @firstSelect="taskFirstSelect"
      />
    </div>
    <div class="table-view">
      <detection-table
        v-if="!isTask"
        :taskStatus="detectionStatus"
        :planStartDate="detectionDateStart"
        :planEndDate="detectionDateEnd"
        :createName="detectionPerson"
      />
      <task-table
        v-else
        :taskStatus="taskStatus"
        :planStartDate="taskDateStart"
        :planEndDate="taskDateEnd"
        :createName="taskPerson"
        :firstInspection="taskFirst"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import TaskSwitch from "./components/TaskSwitch.vue";
import TaskManager from "./components/TaskManager.vue";
import DetectionManager from "./components/DetectionManager.vue";
import TaskTable from "./components/TaskTable.vue";
import DetectionTable from "./components/DetectionTable.vue";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
const exitFullScreenUrl=ref('')
const FullScreenUrl =ref('')
const router = useRouter();
const getImgUrl = () => {
  return new URL(`@/assets/images/home.png`, import.meta.url).href;
};
let user = window.localStorage.getItem("user");
user = JSON.parse(user);
const userName = ref(user.nickname);

const fullScreen = ref(!document.fullscreenElement);

const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    enterFullScreen();
    fullScreen.value = false;
  } else {
    exitFullScreen();
    fullScreen.value = true;
  }
};
const enterFullScreen = () => {
  let element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    /* Firefox */
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    /* Chrome, Safari & Opera */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    /* IE/Edge */
    element.msRequestFullscreen();
  }
};
const exitFullScreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    /* IE/Edge */
    document.msExitFullscreen();
  }
};

/** 当前是否为任务单 */
const isTask = ref(user.identityType == 1);
const navigateTitle = ref("工序检验单");

const currTaskType = (el) => {
  isTask.value = el;
  if (el) {
    navigateTitle.value = "工序任务单";
  } else {
    navigateTitle.value = "工序检验单";
  }
};

// 检验单状态
const detectionStatus = ref("");
// 检验单日期-开始
const detectionDateStart = ref(null);
// 检验单日期-结束
const detectionDateEnd = ref(null);
// 检验单姓名
const detectionPerson = ref(null);
/** 检验单状态改变 */
const detectionStatusSelect = (status) => {
  detectionStatus.value = status;
};

/** 检验单日期改变 */
const detectionDateSelect = (date) => {
  if (date && date != null) {
    detectionDateStart.value = date.start;
    detectionDateEnd.value = date.end;
  } else {
    detectionDateStart.value = null;
    detectionDateEnd.value = null;
  }
};

/** 检验单人员改变 */
const detectionPersonSelect = (person) => {
  detectionPerson.value = person;
};

// 任务单状态
const taskStatus = ref("");
// 任务单日期-开始
const taskDateStart = ref(null);
// 任务单日期-结束
const taskDateEnd = ref(null);
// 任务首检状态
const taskFirst = ref(null);
// 任务单姓名
const taskPerson = ref(null);
/** 任务单状态改变 */
const taskStatusSelect = (status) => {
  taskStatus.value = status;
};

/** 任务单日期改变 */
const taskDateSelect = (date) => {
  if (date && date != null) {
    taskDateStart.value = date.start;
    taskDateEnd.value = date.end;
  } else {
    taskDateStart.value = null;
    taskDateEnd.value = null;
  }
};

/** 首检状态改变 */
const taskFirstSelect = (first) => {
  taskFirst.value = first;
};

/** 任务单人员改变 */
const taskPersonSelect = (person) => {
  taskPerson.value = person;
};

/** 返回首页 */
const backHomeTap = () => {
  useUserStore().removeUserInfo();
  // router.replace({ path: "/" });
  location.href = import.meta.env.VITE_APP_CONTEXT_PATH;
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #48a6ea;
}
.header {
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .title {
    font-size: 40px;
    color: white;
    font-weight: bold;
  }
}
.back-view {
  width: 300px;
  height: 70px;
  background-color: #48a6ea;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #48a6ea;
  box-shadow: inset 5px 5px 15px #286bd3, inset -5px -5px 15px #88f1f7;
  border-radius: 35px;
  .home-icon {
    width: 42px;
    height: 42px;
  }
  .home-text {
    color: white;
    font-size: 30px;
    margin-left: 20px;
  }
}

.manager-view {
  height: 50px;
}
.table-view {
  margin: 20px;
  padding: 20px;
  background-color: white;
  height: calc(100vh - 190px);
  border-radius: 20px;
}
.user-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 30px;
}
.user {
  text-align: right;
  color: #ffffff;
  margin-right: 40px;
  display: flex;
  align-items: center;
  img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
}
.fullScreen {
  width: 30px;
  height: 30px;
}
</style>
